import React from 'react';
import '../CanOperate/CanOperate.css'
import { Radio,message } from 'antd'
import {inject,observer} from 'mobx-react'
import {toJS} from 'mobx'
import * as api from '../../../../../utils/api'
import axios from '../../../../../utils/http'

@inject('curOrder')
@observer
class RefundPage extends React.Component{
    constructor(){
        super()
        this.state={
            value:1,
            peiSongVal:0,//暂存配送费
            defalPeiSongVal:0,//默认不退配送费
            zanCunKeTuiKuanMoney:0,//加运费的可退金额  === 金额+配送费
            ketuiiKuanMoney:0,//显示的金额 
            zanShiDeKeTui:0,//不加运费的最高可退金额
            tuKuanShuoMing:'',//退款说明
            caoZuoBeiZhu:'',//操作备注
        }
    }
    componentDidMount(){
        // 获取存储在本地或者mobx中的当前订单的信息
        // 获取实付金额和运费金额渲染在页面上

        console.log(toJS(this.props.curOrder.curOrderDataArr))
        let curOrderDataArr = toJS(this.props.curOrder.curOrderDataArr)
        // 可退款金额 = 已付款金额 + 应付款金额
        let zanCunKeTuiKuanMoney = parseFloat(curOrderDataArr[0].costinfor.costinforAp + curOrderDataArr[0].costinfor.costinforAd).toFixed(2)
        let peiSongVal = curOrderDataArr[0].costinfor.costinforDc
        // let peiSongVal = 10

        // 显示金额 = 可退款金额 - 配送费金额
        let ketuiiKuanMoney = (parseFloat(zanCunKeTuiKuanMoney) - parseFloat(peiSongVal)).toFixed(2)
        this.setState({
            zanCunKeTuiKuanMoney,
            peiSongVal,
            ketuiiKuanMoney,
            zanShiDeKeTui:ketuiiKuanMoney,
        })
    }
    onChangeRadio = e => {
        // 判断当前是退运费还是不退运费
        if(e.target.value === 1){
            // curOrder.peiSongMoney = 0
            // 不退运费  输入框的值默认为0.00
            this.setState({
                value:e.target.value,
                // curOrder
                defalPeiSongVal:0
            })
        }else{
            let defalPeiSongValue = this.state.peiSongVal
            // mobx中获取的当前订单信息中的 运费
            this.setState({
                value:e.target.value,
                defalPeiSongVal:defalPeiSongValue,
            })
        }    
    }
    huiDaoOrderDetail = (obj)=>{
        let curOrderDataArr = toJS(this.props.curOrder.curOrderDataArr)
        // let curOrderDataOperateArr = toJS(this.props.curOrder.curOrderDataOperateArr)
        // let amount = parseFloat(this.state.amount) + parseFloat(this.state.curOrder.peiSongMoney)//可退金额
        // let amount = parseFloat(this.state.zanCunKeTuiKuanMoney)//加运费可退金额
        let amountNo = parseFloat(this.state.zanShiDeKeTui)//不加运费可退金额
        let xianshiMoney = parseFloat(this.state.ketuiiKuanMoney)//临时显示金额
        if(obj === 1){
            if(this.state.tuKuanShuoMing!=='' && this.state.ketuiiKuanMoney!==''){
                // if(this.state.value === 1){
                    //不退运费
                    if(xianshiMoney <= amountNo){
                        // 退款成功
                        /* 向后台发起请求 返回修改后的数据信息 */
                        axios({
                            url: api.POST_ADDDRAWBACK,
                            method:'POST',
                            data:{
                                orderId: curOrderDataArr[0].orderId,
                                raId: 0,
                                raMoney: {
                                    amount: xianshiMoney,
                                    freight: this.state.defalPeiSongVal,
                                    frestatus: 0,
                                    raId: 0
                                },
                                refmgtId: 0,
                                refmgtOn: this.state.caoZuoBeiZhu,
                                refmgtOperator: "当前登录者",
                                refmgtRi: this.state.tuKuanShuoMing,
                                refmgtRm: 1
                            }
                        }).then(data=>{
                            console.log(data)
                            message.success('退款成功！！！')
                            this.props.history.push('/Home/dingDan/Orderlist/Orderdetail')
                        })
                    }else{
                        message.error('退款金额不能超出可退金额！！！')
                    }
            }else{
                message.error('退款金额和退款说明不能为空哦！！！')
            }
        }else{
            // this.props.onToOrderDetail()
            this.props.history.push('/Home/dingDan/Orderlist/Orderdetail')
        }
    }
    changeRefundMoney = (e)=>{
        // 修改退款金额
        this.setState({
            ketuiiKuanMoney:e.target.value,
        })
    }
    changeRefundFormMate = ()=>{
        // 修改退款金额的格式
        let ketuiiKuanMoney = this.state.ketuiiKuanMoney

        if(ketuiiKuanMoney==='' || isNaN(ketuiiKuanMoney)){
            ketuiiKuanMoney = parseFloat(this.state.zanCunKeTuiKuanMoney).toFixed(2)
        }else{
            ketuiiKuanMoney = parseFloat(ketuiiKuanMoney).toFixed(2)
        }
        this.setState({
            ketuiiKuanMoney
        })
    }
    changeReFundInstruction = (e)=>{
        // 退款说明
        this.setState({
            tuKuanShuoMing:e.target.value
        })
    }
    changeOperateMsg = (e)=>{
        this.setState({
            caoZuoBeiZhu:e.target.value
        })
    }
    render(){
        return(
            <div className="peratePage">
                <h1>退款管理</h1>
                <div>
                    操作备注 : <textarea name="" id="" cols="80" rows="3" onChange={this.changeOperateMsg}></textarea>
                </div>
                <div className="contentBox">
                    退款金额 :  &nbsp;&nbsp; 金额<input type="text" value={this.state.ketuiiKuanMoney} onBlur={this.changeRefundFormMate} onChange={this.changeRefundMoney}/> &nbsp;&nbsp; 运费<input type="text" value={parseFloat(this.state.defalPeiSongVal).toFixed(2)} disabled/> 
                    <div className="radioBox">
                        <Radio.Group onChange={this.onChangeRadio} value={this.state.value}>
                            <Radio value={1} className="whiteTxt">不退运费</Radio>
                            <Radio value={2} className="whiteTxt">退运费</Radio>
                        </Radio.Group>
                    </div>
                </div>
                <div className="contentBox">
                    退款方式 : &nbsp;&nbsp; <Radio checked className="whiteTxt">线下退款</Radio>
                </div>
                <div className="contentBox">
                    退款说明 : <textarea name="" id="" cols="80" rows="3"onBlur={this.changeReFundInstruction}></textarea>
                </div>
                <div className="contentBox">
                    <button className="copyBtn" onClick={()=>this.huiDaoOrderDetail(1)}>确定</button>
                    <button className="copyBtn" onClick={()=>this.huiDaoOrderDetail(2)}>返回</button>
                </div>
            </div>
        )
    }
}
export default RefundPage